---
title: Esquema de colores
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Tarjeta de Esquema de Color

Representa diferentes esquemas de color y está diseñado especialmente para temas claros y oscuros.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| "Props"           | Tipo                                    | Descripción                                                                                           | Predeterminado |
| ----------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------- | -------------- |
| variante          | "cadena"                                | La variante del esquema de color. Las opciones incluyen `Oscuro`, `Claro` y `Sistema` | claro          |
| seleccionado      | booleano                                | Si es `verdadero`, muestra una marca de verificación para indicar el esquema de color seleccionado    |                |
| props adicionales | `React.ComponentPropsWithoutRef<'div'>` | Props del elemento HTML estándar `div`                                                                |                |

</Tab>

</Tabs>

## Selector de Esquema de Color

Permite a los usuarios elegir entre diferentes esquemas de color.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| "Props"    | Tipo                 | Descripción                                                                  |
| ---------- | -------------------- | ---------------------------------------------------------------------------- |
| valor      | `Esquema de colores` | El esquema de color actualmente seleccionado                                 |
| "onChange" | "función"            | The callback function you want to trigger when a user selects a color scheme |

</Tab>

</Tabs>
